<template>
  <div class="wrap-left">
    <div class="txt">该应用的设备</div>
    <!-- 搜索 -->
    <div class="search-box">
      <el-input
        :placeholder="placeholder"
        v-model="input"
        class="input-with-select"
      >
        <el-select
          v-model="select"
          style="width: 130px;"
          slot="prepend"
          placeholder="请选择"
        >
          <el-option label="别称" value="1"></el-option>
          <el-option label="国标编码" value="2"></el-option>
          <el-option label="序列号" value="3"></el-option>
        </el-select>
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="fnSearch"
        ></el-button>
        <i
          slot="suffix"
          class="el-input__icon el-icon-circle-close"
          @click="FnAll()"
        ></i>
      </el-input>
    </div>
    <!-- 列表 -->
    <el-table
      id="tableL"
      ref="table"
      :data="tableData"
      border
      style="width: 100%"
      stripe
      @selection-change="handleSelectionChange"
      @sort-change="changeSort"
      :row-key="getRowKeys"
    >
      <el-table-column
        type="selection"
        width="40"
        align="center"
        :reserve-selection="false"
      ></el-table-column>

      <el-table-column prop="alias" label="别称" min-width="100" align="center">
        <template slot-scope="scope">{{
          scope.row.alias ? scope.row.alias : "-"
        }}</template>
      </el-table-column>
      <el-table-column prop="sn" label="序列号" min-width="160" align="center">
        <template slot-scope="scope">{{ scope.row.sn }}</template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      right
      background
      layout="total,prev, pager, next, sizes"
      :page-sizes="[5, 10, 15, 25]"
      :page-size="pagesize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>

    <!--删除全部设备  -->
    <div
      class="batch-btn-con"
      v-if="biz_for == 1"
      :style="{
        position: 'fixed',
        left: left,
        top: top,
        'z-index': 99999,
        width: '40px',
      }"
    >
      <el-button class="batchDelect" type="primary" plain @click="batchFn">
        <i class="el-icon-d-arrow-right"></i>
      </el-button>
    </div>
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";
import bus from "@/utils/bus";
export default {
  name: "",
  props: {
    app_id: {
      type: String,
      default: "",
    },
    app_name: {
      type: String,
      default: "",
    },
    biz_for: {
      type: Number,
      default: "",
    },
  },
  data() {
    return {
      placeholder: "", //搜索中placeholder
      select: "", //搜索中select
      input: "", //搜索中input
      currpage: 1, //当前页
      pagesize: 5, //每页几条
      total: 0, // 总数
      tableData: [], // 表格数据
      tableChecked: [], // 多选
      batchDelectId: [], //批量删除id
      checkAll: false, // 是否全选状态
      left: 0, //button left
      top: 0, //button top
    };
  },
  computed: {
    //刷新table
    submitData() {
      return this.$store.state.submitData;
    },
  },
  watch: {
    //刷新table
    submitData(newVal, oldVal) {
      if (newVal != oldVal) {
        this.search();
        this.currpage = 1;
      }
    },
  },
  created() {},
  mounted() {
    this.search();
    if (this.select == 1) {
      this.placeholder = "请输入名称";
    } else if (this.select == 2) {
      this.placeholder = "请输入国标编码";
    } else if (this.select == 3) {
      this.placeholder = "请输入序列号";
    } else {
      this.placeholder = "请输入";
    }
    bus.$on("refreshLeft", (e) => {
      this.search();
    });
     // 设置button位置
    this.setStyleBtn();
    window.addEventListener("resize", () => {
      this.setStyleBtn();
    });
  },
  methods: {
    // 设置button位置
    setStyleBtn() {
      this.$nextTick(() => {
        var table = document.getElementById("tableL");
        if (!!table) {
          let { left, top, height, width } = table.getBoundingClientRect();
          this.left = left + width + 40 + "px";
          this.top = top + height / 2 + 20 + "px";
        }
      });
    },
    // 搜索
    async fnSearch() {
      let { input, select } = this;
      this.currpage = 1;

      if (input == "") {
        this.$message.error("请输入内容");
        return;
      }
      this.search();
    },
    //初始列表
    search(id) {
      let dataParams = {};
      if (this.select == 1) {
        dataParams = {
          app_id: !id ? this.app_id : id,
          page: this.currpage,
          page_num: this.pagesize,
          name_like: this.input,
        };
      } else if (this.select == 2) {
        dataParams = {
          app_id: !id ? this.app_id : id,
          page: this.currpage,
          page_num: this.pagesize,
          sn28181_like: this.input,
        };
      } else if (this.select == 3) {
        dataParams = {
          app_id: !id ? this.app_id : id,
          page: this.currpage,
          page_num: this.pagesize,
          sn_like: this.input,
        };
      } else {
        dataParams = {
          app_id: !id ? this.app_id : id,
          page: this.currpage,
          page_num: this.pagesize,
        };
      }
      postData("/adminweb/dev/app/device/list", dataParams)
        .then((res) => {
          if (res.code == 0) {
            if (!res.datas || !res.datas.devices) {
              return;
            }
            let devices = res.datas.devices;
            this.tableData = devices;
            this.total = res.datas.total_count;
            console.log(this.tableData);
          } else if (res.code == -56055) {
            return;
          } else {
            this.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          this.$message.error("error");
        });
    },
    //全部
    FnAll() {
      this.currpage = 1;
      this.input = "";
      this.select = "";
      this.search();
    },
    // 获取row的key值
    getRowKeys(row) {
      return row.sn;
    },
    //点击 第几页
    handleCurrentChange(cpage) {
      this.currpage = cpage;
      this.search();
    },
    //每页有几条
    handleSizeChange(psize) {
      this.currpage = 1;
      this.pagesize = psize;
      this.search();
    },
    //操作多选
    handleSelectionChange(val) {
      var that = this;
      this.batchDelectId = [];
      that.tableChecked = val;
      console.log(that.tableChecked);
      if (val.length > 0) {
        for (let i = 0; i < val.length; i++) {
          this.batchDelectId.push(val[i]["sn"]);
        }
      }
    },
    //排序
    changeSort(val) {
      console.log(val);
    },

    //批量，为分组删除设备
    batchFn(rows) {
      var that = this;
      console.log(that.batchDelectId);
      if (that.batchDelectId.length == 0) {
        
        that.$message.success("请勾选要删除的设备")
        return;
      } else if (that.batchDelectId.length == 1) {
        that
          .$confirm("此操作将删除单个设备，是否继续", "删除设备", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
              that.batch_post()
          })
          .catch(() => {
            that.$message.success("已取消");
            that.$refs.table.clearSelection();
          });
      }else if (that.batchDelectId.length > 1) {
        that
          .$confirm("此操作将批量删除，是否继续", "删除设备", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
              that.batch_post()
          })
          .catch(() => {
            that.$message.success("已取消");
            that.$refs.table.clearSelection();
          });
      }
    },
    batch_post() {
      let that = this;
      postData("/adminweb/dev/app/device/delete", {
        app_id: that.app_id,
        devices: that.batchDelectId,
      })
        .then((res) => {
          console.log(res);
          if (res.code == "0") {
           that.$message.success("删除成功！")
            that.search(); // 刷新当前列表
            // that.$emit("refreshRight");
            bus.$emit("refreshRight");
            //刷新右侧列表
          } else {
            that.$message.error(res.code + "，" + res.msg);
          }
        })
        .catch((res) => {
          that.$message.error(res);
        });
    },
  },
};
</script>
<style scoped>
.search-box {
  margin: 15px 0;
  width: 100%;
}
/* 更改table,表头背景 */
.wrap-left >>> .el-table--border th,
.el-table__fixed-right-patch {
  /* background: #c0dee2; */
  background: #f0f3f4;
}
.wrap-left {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 15px;
  padding-top: 0;
  position: relative;
}
.txt {
  height: 50px;
  line-height: 50px;
  font-weight: 600;
  color: #409eff;
}
.searchBox {
  margin-bottom: 20px;
}
.wrap-left >>> .el-pagination {
  float: right;
  margin-top: 30px;
}

.batch-btn-con {
  z-index: 999;
  background: #fff;
  /* position: absolute;
  top: 50%;
  right: -50px; */
}
.wrap-left >>> .tips {
  margin-top: 10px;
  display: block;
  font-size: 15px;
}
.wrap-left >>> .el-pagination__jump {
  margin-left: 0;
}
/* 后加的 */
.wrap-left >>> .el-pagination__jump {
  margin-left: 0;
}
.wrap-left >>> .el-pagination__sizes {
  margin-right: 0;
}
.wrap-left >>> .el-pager li {
  margin: 0 2px;
}
</style>
